<template>
  <div>
    <view class="date-section">
      <picker
        mode="date"
        :value="date"
        start="2015-09-01"
        end="2017-09-01"
        @change="bindDateChange"
      >
        <view class="picker">
          当前选择(点击日期可进行选择): {{ date }}
        </view>
      </picker>
    </view>
    <div v-for="(item, index) in newsArr" :key="index" class="today-class">
      <span class="lsdate-class">日期：{{ item.lsdate }}</span>
      <hr />
      <span class="event-class">
        <span class="event-title-class">事件：</span>
        <span v-html="item.title"></span>
      </span>
    </div>
    <i-spin size="large" fix v-if="spinShow"></i-spin>
  </div>
</template>

<script>
  import moment from 'moment'
  
  export default {
    data () {
      return {
        newsArr: [],
        spinShow: false,
        searckKey: this.formatDate(),
        date: moment().format('YYYY-MM-DD'),
      }
    },
    methods: {
      formatDate (dateStr) {
        const params = dateStr || undefined 
        let months = (moment(params).get('month') + 1).toString()
        let dates = moment(params).get('date').toString()
        months = months.padStart(2, '0')
        dates = dates.padStart(2, '0')
        return `${months}${dates}`
      },
      getHistoriesList () {
        this.spinShow = true
        wx.request({
          url: 'https://api.tianapi.com/txapi/lishi/', // 这里必须在后面呢加上 '/',才可以访问到
          data: {
            key: 'c732ed00482b7208218faf599e32239a',
            date: this.searckKey,
          },
          header: {'content-type':'application/json'},
          method: 'GET',
          dataType: 'json',
          responseType: 'text',
          success: (result)=>{
            const { code, newslist = [] } = result.data
            if (code === 200) {
              this.newsArr = newslist
            }
          },
           complete: ()=>{
            this.spinShow = false
            wx.stopPullDownRefresh()
           }
        })
      },
      bindDateChange (e) {
        const { value } = e.target
        this.searckKey = this.formatDate(value)
        this.date = value
        this.getHistoriesList()
      }
    },
    onLoad () {
      this.getHistoriesList()
    },
    onPullDownRefresh () {
      this.searckKey = this.formatDate()
      this.newsArr = []
      this.getHistoriesList()
    }
  }
</script>

<style scoped>
  .date-section {
    margin-bottom: 20rpx;
  }
  .picker {
    font-size: 14px;
    color: red;
  }
  .today-class {
    border-top: 1px solid #eee;
  }
  .lsdate-class {
    font-size: 14px;
    color: #bbb;
  }
  .event-class {
    font-size: 16px;
  }
  .event-title-class {
    font-size: 14px;
    color: cornflowerblue;
  }
</style>